<template>
	<view class="content">
		<view class="item flex-y-center" @tap="goto" data-url="../member/index?type=''">
			<view class="flex-y-center">
				<view class="avat-img-view"><image :src="merberInfo.headimg ? merberInfo.headimg : `${pre_url}/static/img/touxiang.png`"></image></view>
				<view class="user-info" v-if="merberInfo.id">
					<view class="un-text">{{merberInfo.realname ? merberInfo.realname : merberInfo.nickname}}</view>
					<view class="tel-text">
						<text>id : </text>{{merberInfo.id}}
					</view>
				</view>
				<view class="user-info" v-else>
					 <text class="un-text">请选择会员</text>
				</view>
			</view>
			<view class="jiantou-img flex flex-y-center">
				<image src="/static/img/arrowright.png"></image>
			</view>
		</view>
		<view class="item flex-col">
			<view class="flex-y-center input-view"> 
				<text class="input-title">联 系 人：</text>
				<input placeholder="请输入联系人的姓名" v-model="linkman" @input=""	placeholder-style="color:#626262;font-size:28rpx"/>
			</view>
			<view class="flex-y-center input-view">
				<text class="input-title">联系电话：</text>
				<input placeholder="请输入联系人的手机号" v-model="tel" @input=""	placeholder-style="color:#626262;font-size:28rpx"/>
			</view>
			<view class="flex-y-center input-view address-view">
				<text class="input-title">地 址：</text>
				<view class="address-chose flex-y-center">
					<textarea placeholder="请输入联系人的地址" v-model="address" @input=""	placeholder-style="color:#626262;font-size:28rpx" style="width: 400rpx;height: 100rpx;" />
					<view class="but-class" :style="{background:'linear-gradient(-90deg,'+t('color1')+' 0%,rgba('+t('color1rgb')+',0.8) 100%)'}"  @tap="selectAddres()">
						选择
					</view>
				</view>
			</view>
		</view>
		<view class="item">
			<view class="title-view flex-y-center">
				<view>商品列表</view>
				<view class="but-class" :style="{background:'linear-gradient(-90deg,'+t('color1')+' 0%,rgba('+t('color1rgb')+',0.8) 100%)'}" @click="addshop">添加商品</view>
			</view>
			<view class="product">
				<view v-for="(item, index2) in prodata" :key="index2">
					<view class="item flex">
						<!-- @tap="goto" :data-url="'/pagesZ/shop/product?id=' + item.product.id" -->
						<view class="img">
							<image v-if="item.guige.pic" :src="item.guige.pic"></image>
							<image v-else :src="item.product.pic"></image>
						</view>
						<view class="info flex1">
							<view class="f1">{{item.product.name}}</view>
							<view class="f2">规格：{{item.guige.name}}</view>
							<view class="modify-price flex-y-center">
								<view class="f2">修改单价：</view>
								<input type="number" :value="item.guige.sell_price" class="inputPrice" @input="inputPrice($event,index2)">
							</view>
							<view class="f3">
								<block><text style="font-weight:bold;">￥{{item.guige.sell_price}}</text></block>
								<text style="padding-left:20rpx"> × {{item.num}}</text>
							</view>
						</view>
						<view class="del-view flex-y-center" @tap.stop="clearShopCartFn(item.id)" style="color:#999999;font-size:24rpx"><image src="/static/img/del.png" style="width:24rpx;height:24rpx;margin-right:6rpx"/></view>
					</view> 
				</view>
			</view>
			<view class="flex-y-center input-view"> 
				<text class="input-title">配送方式：</text>
				<input placeholder="请输入您的姓名" v-model="freight" @input=""	placeholder-style="color:#626262;font-size:28rpx"/>
			</view>
			<view class="flex-y-center input-view">
				<text class="input-title">支付方式：</text>
				<view class='picker-paytype flex1'>
					<picker @change="bindPickerChange" :value="payTypeIndex" :range="payTypeArr" class="picker-class">
						<view class="uni-input">{{payTypeArr[payTypeIndex]}}</view>
					</picker>
					<view class="jiantou-img flex flex-y-center">
						<image src="/static/img/arrowright.png"></image>
					</view>
				</view>
			</view>
<!-- 			<view class="flex-y-center input-view">
				<text class="input-title">配送费：</text>
				<input placeholder="请输入您的姓名" v-model="freightprice" :disabled="true" @input=""	placeholder-style="color:#626262;font-size:28rpx"/>
			</view> -->
			<view class="flex-y-center input-view">
				<text class="input-title">商品金额：</text>
				<text class="f2">¥{{priceCount}}</text>
			</view>
			<view class="flex-y-center input-view" style="justify-content: space-between;">
				<view class="flex-y-center">
					<text class="input-title">订单总价：</text>
					<input placeholder="请输入订单总价" v-model="totalprice" :disabled="totalpricefocus" :focus="!totalpricefocus" @blur='totalpricenblur'	placeholder-style="color:#626262;font-size:28rpx"/>
				</view>
				<view class="but-class" :style="{background:'linear-gradient(-90deg,'+t('color1')+' 0%,rgba('+t('color1rgb')+',0.8) 100%)'}"  @click="totalpricefocus = false">
					修改
				</view>
			</view>
<!-- 			<view class="freight">
				<view class="f1">配送方式</view>
				<view class="freight-ul">
					<view style="width:100%;overflow-y:hidden;overflow-x:scroll;white-space: nowrap;">
						<block v-for="(item, idx2) in freightList" :key="idx2">
							<view class="freight-li"
								:style="freightkey==idx2?'color:'+t('color1')+';background:rgba('+t('color1rgb')+',0.2)':''"
								@tap="changeFreight" :data-bid="buydata.bid" :data-index="idx2">{{item.name}}
							</view>
						</block>
					</view>
				</view>
			</view> -->
			<!-- <view>付款时间</view> -->
			<!-- <view>总金额</view> -->
		</view>
	<view style="width: 100%; height:182rpx;"></view>
	<view class="footer flex notabbarbot">
		<view class="text1 flex1">总计：
			<block>
					<text style="font-weight:bold;font-size:36rpx">￥{{totalprice}}</text>
			</block>
		</view>
		<button class="op" :style="{background:'linear-gradient(-90deg,'+t('color1')+' 0%,rgba('+t('color1rgb')+',0.8) 100%)'}"  @click="topay">
			提交订单</button>
	</view>
	<view v-if="dialogShow" class="popup__container">
		<view class="popup__overlay" @tap.stop="showdialog"></view>
		<view class="popup__modal" style="min-height: 450rpx;">
			<view class="popup__title">
				<text class="popup__title-text">提示</text>
				<image src="/static/img/close.png" class="popup__close" style="width:36rpx;height:36rpx"
					@tap.stop="showdialog" />
			</view>
			<view class="popup__content invoiceBox">
				<form @submit="sendCoupon" @reset="formReset" report-submit="true">
					<view class="orderinfo">
						下单成功！快去分享吧
					</view>
					<button class="ff_btn" open-type="share" :style="{background:t('color1')}" @click="shareBut">去分享</button>
				</form>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data(){
			return{
				pre_url:app.globalData.pre_url,
				merberInfo:{
					realname:'',
					tel:'',
					headimg:'',
					id:''
				},
				linkman:'',
				tel:'',
				prodata:[],
				freightList:[],
				address:'',
				freight:'商家配送',
				goodsprice:'',
				totalprice:'',
				totalpricefocus:true,
				payTypeArr: [],
				payTypeIndex:0,
				paytype:'',
				dialogShow:false,
				onSharelink:''
			}
		},
		onLoad(opt) {
			if(opt.merberData) {
				this.merberInfo = JSON.parse(decodeURIComponent(opt.merberData));
				this.linkman = this.merberInfo.realname ? this.merberInfo.realname:'';
				this.tel = this.merberInfo.tel ? this.merberInfo.tel:'';
				this.mid = this.merberInfo.id;
				this.getdatacart(this.mid);
			}
			this.getpaytype();
		},
		onShow(){
			let that = this;
			uni.$once('dkPageOn',function(res){
				that.changeAddress(res);
			})
			if(this.mid) this.getdatacart(this.mid);
		},
		computed:{
			priceCount(){
				this.goodsprice = this.prodata.reduce((total,current) => total + (current.num * current.guige.sell_price),0);
				this.totalprice = (Number(this.goodsprice) + Number(0)).toFixed(2);
				let num = this.prodata.reduce((total,current) => total + (current.num * current.guige.sell_price),0);
				return num.toFixed(2)
			}
		},
		onShareAppMessage:function(){
			return this._sharewx({title:this.prodata[0].name,pic:this.prodata[0].product.pic,link:this.onSharelink});
		},
		methods:{
			clearShopCartFn: function (id) {
			  var that = this;
				uni.showModal({
					title: '提示',
					content: '确认删除选购的商品吗？',
					success: function (res) {
						if (res.confirm) {
							app.post("ApiAdminOrderlr/cartdelete", {mid:that.mid,cartid:id}, function (res) {
							  that.getdatacart(that.mid)
							});
						} else if (res.cancel) {
							
						}
					}
				});
			},
			shareBut(){
				this.dialogShow = false;
			},
			showdialog(){
				this.dialogShow = !this.dialogShow;
			},
			bindPickerChange: function(e) {
			  this.payTypeIndex = e.detail.value;
				this.paytype = this.payTypeArr[this.payTypeIndex];
			},
			getpaytype(){
				let that = this;
				app.post('ApiAdminOrderlr/getpaytype',{},function(res){
					if(res.status == 1){
						that.payTypeArr = Object.values(res.datalist);
						that.paytype = that.payTypeArr[0];
					}
				})
			},
			totalpricenblur(){
				this.totalpricefocus = true;
			},
			inputPrice(event,index){
				this.prodata[index].guige.sell_price = event.detail.value;
			},
			getdatacart(id){
				let that = this;
				that.loading = true;
				app.post('ApiAdminOrderlr/cart', {mid:id}, function (res) {
					that.loading = false;
					that.prodata = res.cartlist;
				});
			},
			selectAddres(){
				if(!this.merberInfo.id) return  app.error('请先选择会员');
				app.goto('dkaddress?mid=' + this.merberInfo.id)
			},
			changeAddress(res){
				this.address = res.area + res.address;
				this.linkman = res.name;
				this.tel = res.tel;
			},
			addshop(){
				if(!this.merberInfo.id) return  app.error('请先选择会员');
				app.goto('dkfastbuy?mid=' + this.merberInfo.id)
			},
			//提交代付款订单 
			topay: function(e) {
				var that = this;
				var mid = that.merberInfo.id
				var linkman = that.linkman;
				var tel = that.tel;
				var address = that.address;
				var freight = that.freight;
				var freightprice = 0;
				var paycheck = that.paycheck;
				var totalprice = that.totalprice;
			  var goodsprice = that.goodsprice;
				var prodata = that.prodata;
				var paytype = that.paytype;
			  if (!mid) return app.error('请先选择会员');
			  if (!linkman) return app.error('请输入联系人');
				if (!tel) return app.error('请输入联系电话');
				if (!address) return app.error('请输入地址');
				if(!that.prodata.length) return app.error('请添加商品');
				var prodataIdArr = [];
				for (var i = 0; i < prodata.length; i++) {
				  prodataIdArr.push(prodata[i].product.id + ',' + prodata[i].guige.id + ',' + prodata[i].num + ',' + prodata[i].guige.sell_price);
				}
				app.showLoading('提交中');
				app.post('ApiAdminOrderlr/createOrder', {
					mid: mid,
					linkman: linkman,
					tel: tel,
					address: address,
					freight:freight,
					freightprice: freightprice,
					paycheck:'1',
					totalprice:totalprice,
			    goodsprice:that.goodsprice,
			    prodata:prodataIdArr.join('-'),
					paytype:paytype
				}, function(res) {
					app.showLoading(false);
					if (res.status == 0) {
						//that.showsuccess(res.data.msg);
						app.error(res.msg);
						return;
					}else{
					// #ifndef H5
					app.success('下单成功！');
					that.onSharelink = res.url;
					that.dialogShow = true;
					// #endif
					// #ifdef H5
						let shareLink = app.globalData.pre_url +'/h5/'+app.globalData.aid+'.html#' + res.url;
						uni.showModal({
							title: res.msg,
							content: '复制链接分享好友',
							confirmText:'复制分享',
							success: function (ress) {
								if (ress.confirm) {
								uni.setClipboardData({
									data: shareLink,
									success: function() {
										uni.showToast({
											title: '复制成功,快去分享吧！',
											duration: 3000,
											icon: 'none'
										});
									},
									fail: function(err) {
										uni.showToast({
											title: '复制失败',
											duration: 2000,
											icon: 'none'
										});
									}
								});
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
						// #endif
					}
				});
			},
		}
	}
</script>

<style>
	.content{width: 95%;margin: 0 auto;}
	.item{width: 100%;border-radius: 12rpx;background: #fff;margin-top: 20rpx;padding: 15rpx;justify-content: space-between;}
	.item .avat-img-view {width: 80rpx;height:80rpx;border-radius: 50%;overflow: hidden;}
	.item .avat-img-view image{width: 100%;height: 100%;}
	.title-view{justify-content: space-between;padding: 15rpx 0rpx;}
	.title-view .but-class{width: 150rpx;height: 50rpx;line-height: 50rpx;color: #fff;text-align: center;font-size: 24rpx;border-radius:35rpx}
	.user-info{margin-left: 20rpx;}
	.item .user-info .un-text{font-size: 28rpx;color: rgba(34, 34, 34, 0.7);}
	.item .user-info .tel-text{font-size: 26rpx;color: rgba(34, 34, 34, 0.7);margin-top: 5rpx;}
	.jiantou-img{width: 24rpx;height: 24rpx;}
	.jiantou-img image{width: 100%;height: 100%;}
	.input-view{padding: 10rpx 0rpx;margin-bottom: 10rpx;}
	.input-view .picker-paytype{display: flex;align-items: center;justify-content: space-between;}
	.picker-class{width: 500rpx;}
	.input-view .input-title{width: 150rpx;}
	.input-view .but-class{width: 100rpx;height: 50rpx;line-height: 50rpx;color: #fff;text-align: center;font-size: 24rpx;border-radius:35rpx}
	.address-view{display: flex;align-items: flex-start;}
	.address-chose{justify-content: space-between;width: 540rpx;display: flex;align-items: flex-start;}
	.address-plac{color:#626262;font-size:28rpx;}
	.product {width: 100%;border-bottom: 1px solid #f4f4f4;}
	.product .item {position: relative;width: 100%;padding: 20rpx 0;background: #fff;}
	.product .del-view{position: absolute;right: 10rpx;top: 50%;margin-top: -7px;padding: 10rpx;}
	.product .info {padding-left: 20rpx;}
	.product .info .f1 {color: #222222;font-weight: bold;font-size: 26rpx;line-height: 36rpx;margin-bottom: 10rpx;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
	.product .info .f2 {color: #999999;font-size: 24rpx}
	.product .info .f3 {color: #FF4C4C;font-size: 28rpx;display: flex;align-items: center;margin-top: 10rpx}
	.product .info .modify-price{padding: 10rpx 0rpx;}
	.product image {width: 140rpx;height: 140rpx}
	.freight {width: 100%;padding: 20rpx 0;background: #fff;display: flex;flex-direction: column;}
	.freight .f1 {color: #333;margin-bottom: 10rpx}
	.freight .f2 {color: #111111;text-align: right;flex: 1}
	.freight .f3 {width: 24rpx;height: 28rpx;}
	.freighttips {color: red;font-size: 24rpx;}
	.freight-ul {width: 100%;}
	.freight-li {background: #F5F6F8;border-radius: 24rpx;color: #6C737F;font-size: 24rpx;line-height: 48rpx;padding: 0 28rpx;margin: 12rpx 10rpx 12rpx 0;display: inline-block;white-space: break-spaces;max-width: 610rpx;vertical-align: middle;}
	.inputPrice {border: 1px solid #ddd; width: 200rpx; height: 40rpx; border-radius: 10rpx; padding: 0 4rpx;}
	.footer {width: 96%;background: #fff;margin-top: 5px;position: fixed;left: 0px;bottom: 0px;padding: 0 2%;display: flex;align-items: center;z-index: 8;box-sizing:content-box}
	.footer .text1 {height: 110rpx;line-height: 110rpx;color: #2a2a2a;font-size: 30rpx;}
	.footer .text1 text {color: #e94745;font-size: 32rpx;}
	.footer .op {width: 200rpx;height: 80rpx;line-height: 80rpx;color: #fff;text-align: center;font-size: 30rpx;border-radius: 44rpx}
	.footer .op[disabled] { background: #aaa !important; color: #666;}
	
	.orderinfo{width:94%;margin:0 3%;margin-top:16rpx;padding: 14rpx 3%;background: #FFF;}
	.ff_btn{ height:80rpx;line-height: 80rpx;width:90%;margin:0 auto;border-radius:40rpx;margin-top:40rpx;color: #fff;font-size: 28rpx;font-weight:bold}
</style>